<!-- Copyright (c) 2019-2020 十三 all rights reserved. -->
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="header::head-fragment('易购商城-订单结算','order-detail')">
</head>
<link th:href="@{css/bootstrap-modal.css}" rel="stylesheet">
<body>
<header th:replace="header::header-fragment"></header>
<!-- nav -->
<nav th:replace="header::nav-fragment"></nav>

<!-- personal -->
<div id="personal">
    <div class="self-info center">

        <!-- sidebar -->
        <div th:replace="personal-sidebar::sidebar-fragment"></div>

        <div class="intro fr">
            <div class="uc-box uc-main-box">
                <div class="uc-content-box order-view-box">
                    <div class="box-hd">
                        <h1 class="title">填写并核对订单信息</h1>
                    </div>
                    <div class="box-bd">
                        <div class="uc-order-item uc-order-item-pay">
                            <div class="order-detail">
                                <div class="order-summary">
                                    <div class="order-progress">
                                        <ol class="progress-list clearfix progress-list-5">
                                            <li class="step step-done">
                                                <div class="progress"><span class="text">购物车</span></div>
                                                <div class="info"></div>
                                            </li>
                                            <li class="step step-active">
                                                <div class="progress"><span class="text">下单</span></div>
                                                <div class="info"></div>
                                            </li>
                                            <li class="step">
                                                <div class="progress"><span class="text">付款</span></div>
                                                <div class="info"></div>
                                            </li>
                                            <li class="step">
                                                <div class="progress"><span class="text">出库</span></div>
                                                <div class="info"></div>
                                            </li>
                                            <li class="step">
                                                <div class="progress"><span class="text">交易成功</span></div>
                                                <div class="info"></div>
                                            </li>
                                        </ol>
                                    </div>
                                </div>
                                <table class="order-items-table" th:if="${orderConfirm != null}">
                                    <tbody>
                                    <th:block th:each="item : ${orderConfirm.getOrderItems()}">
                                        <tr>
                                            <td class="col col-thumb">
                                                <div class="figure figure-thumb">
                                                    <a target="_blank" th:href="@{'/skuId='+${item.skuId}+'.html'}">
                                                        <img th:src="@{${item.image}}"
                                                             width="80" height="80" alt="">
                                                    </a>
                                                </div>
                                            </td>
                                            <td class="col col-name">
                                                <p class="name">
                                                    <a target="_blank" th:href="@{'/skuId='+${item.skuId}+'.html'}"
                                                       th:text="${item.title}">商品标题</a>
                                                </p>
                                            </td>
                                            <td class="col col-price"><p class="price"
                                                                         th:text="${#numbers.formatDecimal(item.price, 1, 2) + ' 元 x ' + item.count}">
                                                1299元 × 1</p></td>
                                            <td class="col col-actions">
                                            </td>
                                        </tr>
                                    </th:block>
                                    </tbody>
                                </table>
                            </div>
                            <div id="editAddr" class="order-detail-info"
                                 th:each="address : ${orderConfirm.getAddressVos()}">
                                <h3>收货信息[[${address.defaultStatus == 1 ? " (默认)": ""}]]</h3>
                                <a class="check-address">
                                    <span th:attr="def=${address.defaultStatus}, addressId=${address.id}">
                                    [[${address.name}]]
                                    [[${address.province}]]
                                    [[${address.city}]]
                                    [[${address.region}]]
                                    [[${address.detailAddress}]]
                                    [[${address.phone}]]</span>
                                </a>
                                <!--<table class="info-table" th:attr="def=${address.defaultStatus}">-->
                                <!--    <tbody align="left">-->
                                <!--    <tr>-->
                                <!--        <th style="width: 130px">收货人：</th>-->
                                <!--        <td class="user_address_label" th:text="${address.name}">-->
                                <!--            暂未设置-->
                                <!--        </td>-->
                                <!--    </tr>-->
                                <!--    <tr>-->
                                <!--        <th style="width: 130px">收货人电话：</th>-->
                                <!--        <td class="user_address_label" th:text="${address.phone}">-->
                                <!--            暂未设置-->
                                <!--        </td>-->
                                <!--    </tr>-->
                                <!--    <tr>-->
                                <!--        <th style="width: 130px">收货人详细地址：</th>-->
                                <!--        <td class="user_address_label" th:text="${address.detailAddress}">-->
                                <!--            暂未设置-->
                                <!--        </td>-->
                                <!--    </tr>-->
                                <!--    </tbody>-->
                                <!--</table>-->
                                <div class="actions">
                                    <a class="btn btn-small btn-line-gray J_editAddr"
                                       href="javascript:openUpdateModal();">修改</a>
                                </div>
                                <!--<div class="choose">-->
                                <!--    <button >选择</button>-->
                                <!--</div>-->
                            </div>
                            <div id="editTime" class="order-detail-info">
                                <h3>支付方式</h3>
                                <table class="info-table">
                                    <tbody>
                                    <tr>
                                        <th>支付方式：</th>
                                        <td>在线支付</td>
                                    </tr>
                                    </tbody>
                                </table>
                                <div class="actions">
                                </div>
                            </div>
                            <div class="order-detail-total">
                                <table class="total-table">
                                    <tbody>
                                    <tr>
                                        <th>商品总价：</th>
                                        <td><span class="num"
                                                  th:text="${#numbers.formatDecimal(orderConfirm.getTotalAmount(), 1, 2)}">1299.00</span>元
                                        </td>
                                    </tr>
                                    <tr>
                                        <th>运费：</th>
                                        <td><span class="num">0</span>元</td>
                                    </tr>
                                    <tr>
                                        <th class="total">应付金额：</th>
                                        <td class="total"><span class="num"
                                                                th:text="${#numbers.formatDecimal(orderConfirm.getTotalAmount(), 1, 2)}">1299.00</span>元
                                        </td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                    <div class="more clearfix" align="right" style="margin-top: 20px">
                        <div class="actions">
                            <input type="hidden" id="orderToken" th:value="${orderConfirm.orderToken}">
                            <!--<input type="hidden" id="payPrice" th:value="${orderConfirm.getTotalAmount()}">-->
                            <input type="hidden" id="addressId">
                            <button type="submit" id="saveOrder" class="btn btn-small btn-primary">提交订单
                                <!--<a id="saveOrder" class="btn btn-small btn-primary" title="提交订单">提交订单</a>-->
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal fade" id="personalInfoModal" tabindex="-1" role="dialog"
             aria-labelledby="personalInfoModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                aria-hidden="true">&times;</span></button>
                        <h6 class="modal-title" id="personalInfoModalLabel">地址修改</h6>
                    </div>
                    <div class="modal-body">
                        <form id="personalInfoForm">
                            <div class="form-group" th:each="addressVo : ${orderConfirm.getAddressVos()}">
                                <input type="hidden" id="userId" th:value="${addressVo.id}">
                                <label for="address" class="control-label">收货地址:</label>
                                <input type="text" class="form-control" id="address" name="address"
                                       placeholder="请输入收货地址" th:value="${addressVo.detailAddress}"
                                       required="true">
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-primary" id="saveButton">确认</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="clear"></div>
    </div>
</div>


<div th:replace="footer::footer-fragment"></div>

<!-- jQuery -->
<script th:src="@{jquery/jquery.min.js}"></script>
<script th:src="@{js/search.js}" type="text/javascript"></script>
<script th:src="@{sweetalert/sweetalert.min.js}"></script>
<script th:src="@{js/bootstrap3.js}"></script>
<script type="text/javascript">

    $(document).ready(function () {
        check();
    })

    function check() {
        $("#addressId").val($(".check-address span").attr("addressId"));
        $(".check-address span").css({"border": "0px solid red"});
        $(".check-address span[def='1']").css({"border": "2px solid red"});
    }

    $('.check-address span').click(function () {
        $(".check-address span").attr("def", 0);
        $(this).attr("def", 1);
        check();
        $("#addressId").val($(this).attr("addressId"));
    })


    // 提交订单
    $('#saveOrder').click(function () {
        // 地址ID
        let addressId = $("#addressId").val();
        // 应付价格
        let payPrice = [[${orderConfirm.getTotalAmount()}]];
        // 防重令牌
        let orderToken = $("#orderToken").val();
        let data = {
            "addressId": addressId,
            "payPrice": payPrice,
            "orderToken": orderToken
        };
        $.ajax({
            type: 'POST',
            url: '/order/submit',
            contentType: 'application/json',
            data: JSON.stringify(data),
            success: function (result) {
                if (result.code === 200) {
                    let param = result.data;
                    window.location.href = '/order/pay-select?orderSn=' + param.order.orderSn + '&payPrice=' + param.payPrice;
                } else {
                    swal(result.msg, {
                        icon: "error",
                    }).then(() => {
                        window.location.href = '/order/confirm';
                    });
                }
            },
            error: function () {
                swal('操作失败', {
                    icon: "error",
                });
            }
        });
    });


    function openUpdateModal() {
        $('#personalInfoModal').modal('show');
    }

    // 绑定modal上的保存按钮
    $('#saveButton').click(function () {
        let address = $("#address").val();
        let userId = $("#userId").val();
        let data = {
            "id": userId,
            "defaultReceiveAddress": address
        };
        $.ajax({
            type: 'POST',//方法类型
            url: '/member/update',
            contentType: 'application/json',
            data: JSON.stringify(data),
            success: function (result) {
                if (result.code === 200) {
                    $('#personalInfoModal').modal('hide');
                    window.location.reload();
                } else {
                    $('#personalInfoModal').modal('hide');
                    swal(result.msg, {
                        icon: "error",
                    });
                }
            },
            error: function () {
                swal('操作失败', {
                    icon: "error",
                });
            }
        });
    });
</script>
</body>
</html>
